import styles from "./ProductIntro.module.css"
import React from "react"
import { Typography, Carousel, Image, Rate, Table } from "antd"
import { ColumnsType } from "antd/es/table"
interface PropsType {
  title: string
  shortDescription: string
  price: string | number
  coupons: string
  points: string
  discount: string
  rating: string | number
  pictures: string[]
}
const columns: ColumnsType<RowType> = [
  {
    title: "title",
    dataIndex: "title",
    key: "title",
    align: "left",
    width: 120,
  },
  {
    title: "description",
    dataIndex: "description",
    key: "description",
    align: "center",
  },
]

interface RowType {
  title: string
  description: string | number | JSX.Element
  key: number
}

export const ProductIntro: React.FC<PropsType> = ({
  title,
  shortDescription,
  price,
  coupons,
  points,
  discount,
  rating,
  pictures,
}) => {
  const tableDataSource: RowType[] = [
    {
      key: 2123,
      title: "限时抢购折扣",
      description: discount ? (
        <>
          ￥<Typography.Text delete>{price}</Typography.Text>{" "}
          <Typography.Text type="danger" strong>
            {discount}
          </Typography.Text>
        </>
      ) : (
        "暂无折扣"
      ),
    },
    {
      key: 32133,
      title: "领取优惠",
      description: coupons ? discount : "“无优惠券可领",
    },
    {
      key: 3213124,
      title: "线路评价",
      description: (
        <>
          <Rate allowHalf defaultValue={+rating}></Rate>
          <Typography.Text style={{ marginLeft: 10 }}>
            {rating}星
          </Typography.Text>
        </>
      ),
    },
  ]
  return (
    <div className={styles["intro-container"]}>
      <Typography.Title level={4}>{title}</Typography.Title>
      <Typography.Text>{shortDescription}</Typography.Text>
      <div className={styles["intro-detail-content"]}>
        <Typography.Text style={{ marginLeft: 20 }}>
          ￥<span className={styles["intro-detail-strong-text"]}>{price}</span>
          元 /人起
        </Typography.Text>
        <Typography.Text style={{ marginLeft: 50 }}>
          <span className={styles["intro-detail-strong-text"]}>{rating}</span>
        </Typography.Text>
      </div>
      <Carousel autoplay>
        {pictures.map((p) => {
          return <Image height={150} src={p}></Image>
        })}
      </Carousel>
      <Table<RowType>
        dataSource={tableDataSource}
        columns={columns}
        size="small"
        bordered={false}
        pagination={false}
      />
    </div>
  )
}
